<template>
    <view class="wrap">
        <view class="message" v-if="list.length">
            <view class="message_cell" v-for="(item, index) in list" :key="index" @click="goNext(item)">
                <view class="cell_icon">
                    <image :src="item.ICON" mode="widthFix"></image>
                </view>
                <view class="cell_info">
                    <view class="kefuBox" v-if="item.MsgType == '平台客服'">
                        <button open-type="contact"
                        bindcontact="handleContact">联系在线客服</button>
                    </view>
                    
                    <view class="info_tit dflex">
                        <view class="tit hiddenText">
                            {{ item.MsgType }}
                        </view>
                        <view class="time" v-if="item.LastTitle">
                            {{ getTime(item.LastTime) }}
                        </view>
                    </view>
                    <view class="info_lit dflex">
                        <view class="lit hiddenText">
                            {{ item.LastTitle || '暂无消息' }}
                        </view>
                        <view class="count dflex" v-if="item.Num > 0">
                            {{ item.Num }}
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>

export default {
    data() {
        return {
            notice: {
                AppointmentType: '系统消息',
                ICON: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/171567647521849.png',
                LastTitle: '暂无消息',
                MsgType: '系统消息',
                Num: 0,
                LastTime: '',
                URL: '/pages/user/message/notice'
            },
            list: [],
            user: uni.getStorageSync('user') || false
        };
    },
    onLoad() {

    },
    onShow() {
        this.user = uni.getStorageSync('user')
        this.getDetail()
    },
    methods: {
        async getDetail() {
            let res = await this.$api.post("Message/MyMessage")
            const { code, data, message } = res
            if (code == 0) {
                // this.list = [this.notice,...data]
                this.list = data
            } else {
                this.$pv.message('数据异常')
            }

        },
        telFun(tel) {
			uni.makePhoneCall({
				phoneNumber: tel,
				success() {
					console.log('拨号成功');
				},
				fail(err) {
					console.error('拨号失败:', err);
				},
			});
		},
        goNext(item) {
            if (item.MsgType) {
                this.nav_to(`${item.URL}?title=${item.MsgType}&AppointmentType=${item.AppointmentType}`)
			} else if (item.MsgType == '平台客服') {
				
			}
           

        }
    }
}
</script>

<style lang="scss">
image {
    width: 100%;
    height: 100%;
}

.dflex {
    display: flex;
    align-items: center;
}

view {
    box-sizing: border-box;
}

.wrap {
    .message {
        padding: 32rpx 24rpx;

        .message_cell {
            width: 100%;
            display: flex;
            margin-bottom: 24rpx;

            .cell_icon {
                width: 96rpx;
                height: 96rpx;
                min-width: 96rpx;
            }

            .cell_info {
                flex: 1;
                margin-left: 24rpx;
                padding-bottom: 32rpx;
                border-bottom: 2rpx solid #E4E4E4;
                position: relative;
                .kefuBox{
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    opacity: 0;
                    >button{
                        width: 100%;
                        height: 100%;
                    }
                }

                .info_tit {
                    justify-content: space-between;
                    margin-bottom: 8rpx;

                    .tit {

                        flex: 0.95;
                        font-weight: bold;
                        font-size: 32rpx;
                        color: #333333;
                    }

                    .time {
                        font-size: 24rpx;
                        color: #999999;
                    }

                }

                .info_lit {
                    justify-content: space-between;

                    .lit {
                        width: 300rpx;
                        flex: 0.95;
                        font-size: 28rpx;
                        color: #999999;
                    }

                    .count {
                        width: 36rpx;
                        height: 36rpx;
                        justify-content: center;
                        border-radius: 50%;
                        background-color: #FC201C;
                        font-size: 24rpx;
                        color: #FFFFFF;
                    }
                }
            }
        }
    }
}
</style>
